<template>
	<view class="uni-load-more">
		<!-- Loading status -->
		<view v-if="status === 'loading'" class="uni-load-more__img">
			<view class="loading-icon"></view>
			<text class="uni-load-more__text">{{ contentText.contentrefresh }}</text>
		</view>
		
		<!-- No more data status -->
		<view v-else-if="status === 'noMore'" class="uni-load-more__text">
			{{ contentText.contentnomore }}
		</view>
		
		<!-- Default status -->
		<view v-else class="uni-load-more__text">
			{{ contentText.contentdown }}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-load-more',
		props: {
			status: {
				// Loading status: more-loading-noMore
				type: String,
				default: 'more'
			},
			contentText: {
				type: Object,
				default() {
					return {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					}
				}
			}
		}
	}
</script>

<style>
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
	}
	
	.uni-load-more__img {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.loading-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border: 2rpx solid #808080;
		border-radius: 50%;
		border-top-color: transparent;
		animation: loading 1s linear infinite;
	}
	
	.uni-load-more__text {
		font-size: 28rpx;
		color: #888;
	}
	
	@keyframes loading {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style> 